<template>
    <div class="background">
        <div class="common-layout">
            <el-container>
                <el-header class="header_background">
                    <div style="position: absolute; top: 0.1%; left: 2%;">
                        <img alt="" src="@/assets/logo1.png" style="width: 40px;">
                    </div>
                    <div style="position: absolute; top: 1.5%; left: 38%;">
                        <span style="font-size: 15px; font-weight: bold; color: whitesmoke">
                          您好，房东&nbsp;&nbsp;{{ username }}&nbsp;&nbsp;！欢迎进入房屋租赁平台！
                        </span>
                    </div>
                    <div class="right-info">
                      <el-button @click="SignOut" style="margin-right: 10px;">
                        <el-icon :size="18" style="margin-right: 5px;">
                          <avatar />
                        </el-icon>
                        退出登录
                      </el-button>
                    </div>
                </el-header>
                <el-header class="sub_header_background">
                  <el-menu
                    :default-active="activeIndex"
                    router
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#545c64"
                    text-color="whitesmoke"
                    active-text-color="white"
                    style="height: 102%;"
                    unique-opened
                  >
                    <el-menu-item index="/LandlordHome">首页</el-menu-item>
                    <el-menu-item index="/LandlordHouse">我的房源</el-menu-item>
                    <el-sub-menu index="transaction">
                      <template #title>交易管理</template>
                      <el-menu-item index="/ApplicationAudition">租客申请审核</el-menu-item>
                      <el-menu-item index="/LandlordTransactionRecord">交易记录</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/LandlordSelfInfo">个人信息</el-menu-item>
                  </el-menu>
                </el-header>
                <el-main>
                    <div style="display: flex; font-weight: bold; font-family: Microsoft YaHei; font-size: 20px; margin-top: 0%;">
                      我的房源列表
                      <div class="line" style="margin-left: 1.5%; margin-top: 1%;"></div>
                    </div>
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 1%;"> 
                      <div style="display: flex; align-items: center; gap: 50px;">
                        <el-switch v-model="available" inactive-text="上线中"></el-switch>
                        <el-switch v-model="rented" inactive-text="已出租"></el-switch>
                        <el-switch v-model="pending" inactive-text="待审核"></el-switch>
                        <el-switch v-model="rejected" inactive-text="已拒绝"></el-switch>
                      </div>
                      <el-tooltip content="添加出租申请" placement="top">
                        <el-button icon="plus" style="width: 50px; margin-right: 1%;" type="primary" @click="add"></el-button>
                      </el-tooltip>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 20px;">
                      <el-card shadow="hover" style="margin-top: 2%; width: calc(100% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; ">
                        <el-table :data="filteredData" style="width: 100%" border>
                          <el-table-column label="房源列表" header-align="center">
                            <template #default="{ row }">
                              <div class="common-layout">
                                <el-container>
                                  <el-aside width="200px">
                                    <el-image :src="row.imageUrl" fit="fill" style="width: 100%; height: 100%"></el-image>
                                  </el-aside>
                                  <el-container>
                                    <el-header>
                                      <router-link :to="{ name: 'MyHouseDisplay', query: { houseId: row.houseId } }" style="font-family: Microsoft YaHei;">
                                        {{ row.title }}：{{ row.address }}
                                      </router-link>
                                    </el-header>
                                    <el-main style="margin-top: -5%;">
                                      &nbsp;&nbsp;&nbsp;&nbsp;{{ row.description }}
                                      <el-tag
                                        :type="getStatusTagType(row.status)"
                                        effect="dark"
                                        style="position: absolute; bottom: 10px; right: 10px;"
                                      >
                                        {{ getStatusLabel(row.status) }}
                                      </el-tag>
                                    </el-main>
                                  </el-container>
                                </el-container>
                              </div>
                            </template>
                          </el-table-column>
                          
                          <el-table-column label="操作" width="150" header-align="center">
                            <template #default="scope">
                              <div style="display: flex; flex-direction: column; align-items: baseline; gap: 8px;">
                                <el-button icon="Edit" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                                <el-popconfirm title="确认删除该房源？" @confirm="handleDelete(scope.row)">
                                  <template #reference>
                                    <el-button icon="Delete" type="danger">删除</el-button>
                                  </template>
                                </el-popconfirm>
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-card>
                    </div>
                </el-main>
            </el-container>
            <!-- 修改信息弹窗 -->
            <el-dialog v-model="dialogVisible1" title="编辑房源信息" width="70%" @close="resetForm1">
              <el-form ref="formRef1" :model="form1" label-width="120px">
                <el-form-item label="住房编号" prop="houseId">
                  <el-input v-model="form1.houseId" disabled style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="房东编号" prop="landlordId">
                  <el-input v-model="form1.landlordId" disabled style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="住房名称" prop="title">
                  <el-input v-model="form1.title" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="住房地址" prop="address">
                  <el-input v-model="form1.address" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="房屋描述" prop="description">
                  <el-input v-model="form1.description" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="出租价格" prop="price">
                  <el-input v-model="form1.price" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="住房所在地" prop="area">
                  <el-input v-model="form1.area" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="住房面积" prop="size">
                  <el-input v-model="form1.size" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="房间数" prop="roomCount">
                  <el-input v-model="form1.roomCount" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="楼层" prop="floor">
                  <el-input v-model="form1.floor" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="房屋图片" prop="imageUrl">
                  <el-upload
                    action="#"
                    :auto-upload="false"
                    :show-file-list="true" 
                    :on-change="handleImageChange1"
                    :on-remove="handleRemove1"
                    :limit="1" 
                    list-type="picture-card"
                    :file-list="fileList1"
                  >
                    <el-button v-if="form1.imageUrl === ''" type="primary">点击上传</el-button>
                    <el-text v-else>只能上传一张图片</el-text>
                  </el-upload>  
                </el-form-item>
                <el-form-item label="房屋状态" prop="status">
                  <el-input v-model="form1.status" disabled style="width: 80%"></el-input>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="cancel1">取 消</el-button>
                  <el-button type="primary" @click="save1">确认并重新提交审核</el-button>
                </span>
              </template>
            </el-dialog>
            <el-dialog v-model="dialogVisible2" title="添加房源信息" width="70%" @close="resetForm2">
              <el-form ref="formRef2" :model="form2" label-width="120px">
                <el-form-item label="住房名称" prop="title">
                  <el-input v-model="form2.title" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="住房地址" prop="address">
                  <el-input v-model="form2.address" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="房屋描述" prop="description">
                  <el-input v-model="form2.description" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="出租价格" prop="price">
                  <el-input v-model="form2.price" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="住房所在地" prop="area">
                  <el-input v-model="form2.area" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="住房面积" prop="size">
                  <el-input v-model="form2.size" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="房间数" prop="roomCount">
                  <el-input v-model="form2.roomCount" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="楼层" prop="floor">
                  <el-input v-model="form2.floor" style="width: 80%"></el-input>
                </el-form-item>
                <div style="display: flex; gap: 20px;">
                  <el-form-item label="房屋图片" prop="imageUrl">
                    <el-upload
                      action="#"
                      :auto-upload="false"
                      :show-file-list="true" 
                      :on-change="handleImageChange2"
                      :on-remove="handleRemove2"
                      :limit="1"
                      list-type="picture-card"
                      :file-list="fileList2"
                    >
                      <el-button v-if="form2.imageUrl === ''" type="primary">点击上传</el-button>
                      <el-text v-else>只能上传一张图片</el-text>
                    </el-upload>  
                  </el-form-item>
                  <el-form-item label="房屋信息文本" prop="houseInfoText">
                    <el-upload
                      action="#"
                      :auto-upload="false"
                      :on-change="handleFileChange"
                      :on-remove="handleFileRemove"
                      :limit="1"
                      :accept="'.doc,.docx,.pdf'"
                      :file-list="fileList"
                      >
                      <el-button type="primary">文件上传</el-button>
                      <template #tip>
                        <div class="el-upload__tip">
                          请上传 doc/docx/pdf 文件(大小<=10MB)
                        </div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </div>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="cancel2">取 消</el-button>
                  <el-button type="primary" @click="save2">确认并提交审核</el-button>
                </span>
              </template>
            </el-dialog>
        </div>
    </div>
</template>
<script src="@/assets/js/LandlordHouse.js"></script>

<style scoped>
.background {
  background-color: whitesmoke;
  height: 100vh;
}
.header_background {
  background-color: #1b4989;
  height: 6vh;
}
.sub_header_background {
  background-color: #545c64;
  height: 7vh;
}
.right-info {
  width: 100px;
  position: absolute;
  right: 2%;
  top: 0.7%
}

.right-info:hover {
  cursor: pointer;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.line{ 
  background: url(https://www.upc.edu.cn/ximages/tit1.png) center repeat-x; 
  height: 0.4rem; 
  flex: 1; 
  background-size: auto;
  margin: 0.16rem;
}
</style>